import React from 'react'
import PropTypes from 'prop-types'
import { sexTypeData } from 'utils/seletLocalData'
import moment from 'moment'
import { config ,converDate} from 'utils'
import { Form, Input, Row, Col, Button, Icon, DatePicker, Select } from 'antd'
import { connect } from 'dva'
import { routerRedux } from 'dva/router'
import styles from '../../themes/detail.less'

const FormItem = Form.Item
const ButtonGroup = Button.Group
const Option = Select.Option

const formItemLayout = {
  labelCol: {
    span: 8,
  },
  wrapperCol: {
    span: 16,
  },
}


const ButtonProps = {
  size: 'large',
  style: {
    marginBottom: 0,
  },
}
const EntityDirectorData = ({
  entityDirectorData,
  dispatch,
  loading,
  form: {
    getFieldDecorator,
    validateFields,
    getFieldsValue,
  },
}) => {
  const entityDirectorInfo = entityDirectorData.data || {}
  const { editType, countryCodeData } = entityDirectorData
  const handleOk = () => {
    validateFields((errors) => {
      if (errors) {
        return
      }
      const data = {
        ...getFieldsValue(),
      }
      data.id = entityDirectorInfo.id || 1
      dispatch({
        type: 'entityDirectorData/update',
        payload: data,
      })
    })
  }

  const onAddress = () => {
    dispatch(routerRedux.push({
      pathname: `/address/${entityDirectorInfo.id}/entityDirectorAddress`,
    }))
  }

  const onPhone = () => {
    dispatch(routerRedux.push({
      pathname: `/phone/${entityDirectorInfo.id}/entityDirectorPhone`,
    }))
  }

  const sexData = sexTypeData.map(d => <Option key={d.key}>{d.value}</Option>)
  const countryCode = countryCodeData.map(d => <Option key={d.code}>{d.name}</Option>)
  const dateFormat = 'DD/MM/YYYY';
  return (

    <Form layout="horizontal">
      {editType === 'update' ? <div className={styles.div_buttonGroup}>
        <ButtonGroup {...ButtonProps}>
          <Button onClick={onPhone}>
            Phone<Icon type="phone" />
          </Button>
          <Button onClick={onAddress}>
            Address<Icon type="environment-o" />
          </Button>
        </ButtonGroup>
         </div> : <div></div>}
        <div className={styles.div_buttonGroup}>
        <ButtonGroup {...ButtonProps}>
          <Button onClick={handleOk} loading={loading.effects['entityDirectorData/update']}>
            Save<Icon type="save" />
          </Button>
          <Button >
            Delete<Icon type="delete" />
          </Button>
        </ButtonGroup>
      </div>
      <div className={styles.div_form}>
        <Row gutter={0}>
          <Col span={8}>
            <FormItem label="FirstName" hasFeedback {...formItemLayout}>
              {getFieldDecorator('firstName', {
                initialValue: entityDirectorInfo.firstName,
                rules: [
                  {
                    required: true,
                    max: 255,
                  },
                ],
              })(<Input />)}
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem label="MiddleName" hasFeedback {...formItemLayout}>
              {getFieldDecorator('middleName', {
                initialValue: entityDirectorInfo.middleName,
                rules: [
                  {
                    max: 255,
                  },
                ],
              })(<Input />)}
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem label="LastName" hasFeedback {...formItemLayout}>
              {getFieldDecorator('lastName', {
                initialValue: entityDirectorInfo.lastName,
                rules: [
                  {
                    required: true,
                    max: 255,
                  },
                ],
              })(<Input />)}
            </FormItem>
          </Col>
        </Row>
        <Row gutter={0}>
          <Col span={8}>
            <FormItem label="Title" hasFeedback {...formItemLayout}>
              {getFieldDecorator('title', {
                initialValue: entityDirectorInfo.title,
                rules: [
                  {
                    required: true,
                  },
                ],
              })(<Input />)}
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem label="Alias" hasFeedback {...formItemLayout}>
              {getFieldDecorator('alias', {
                initialValue: entityDirectorInfo.alias,
                rules: [
                  {
                    max: 255,
                  },
                ],
              })(<Input />)}
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem label="Birthdate" hasFeedback {...formItemLayout}>
              {getFieldDecorator('birthdate', {
                initialValue: entityDirectorInfo.birthdate ? moment(converDate(entityDirectorInfo.birthdate),dateFormat) : '',
                rules: [
                  {
                    required: true,
                  },
                ],
              })(<DatePicker style={{width:'100%'}} format={dateFormat}/>)}
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span={8}>
            <FormItem label="Gender" hasFeedback {...formItemLayout}>
              {getFieldDecorator('gender', {
                initialValue: entityDirectorInfo.gender,
                rules: [
                  {
                    required: true,
                  },
                ],
              })(<Select style={{ width: '100%' }}>{sexData}</Select>)}
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem label="BirthPlace" hasFeedback {...formItemLayout}>
              {getFieldDecorator('birthPlace', {
                initialValue: entityDirectorInfo.birthPlace,
              })(<Input />)}
            </FormItem>
          </Col>
        </Row>
        <Row gutter={0}>
          <Col span={8}>
            <FormItem label="Nationality1" hasFeedback {...formItemLayout}>
              {getFieldDecorator('nationality1', {
                initialValue: entityDirectorInfo.nationality1,
              })(<Select style={{ width: '100%' }} showSearch>{countryCode}</Select>)}
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem label="Nationality2" hasFeedback {...formItemLayout}>
              {getFieldDecorator('nationality2', {
                initialValue: entityDirectorInfo.nationality2,
              })(<Select style={{ width: '100%' }} showSearch>{countryCode}</Select>)}
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem label="Nationality3" hasFeedback {...formItemLayout}>
              {getFieldDecorator('nationality3', {
                initialValue: entityDirectorInfo.nationality3,
              })(<Select style={{ width: '100%' }} showSearch>{countryCode}</Select>)}
            </FormItem>
          </Col>
        </Row>
        <Row gutter={0}>


        </Row>
        <Row gutter={0}>
          <Col span={8}>
            <FormItem label="Residence" hasFeedback {...formItemLayout}>
              {getFieldDecorator('Residence', {
                initialValue: entityDirectorInfo.Residence,
                rules: [
                  {
                    max: 255,
                  },
                ],
              })(<Select style={{ width: '100%' }} showSearch>{countryCode}</Select>)}
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem label="Occupation" hasFeedback {...formItemLayout}>
              {getFieldDecorator('Occupation', {
                initialValue: entityDirectorInfo.Occupation,
              })(<Input />)}
            </FormItem>
          </Col>
        </Row>
        <Row gutter={0}>
          <Col span={8}>
            <FormItem label="TaxNumber" hasFeedback {...formItemLayout}>
              {getFieldDecorator('taxNumber', {
                initialValue: entityDirectorInfo.taxNumber,
              })(<Input />)}
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem label="TaxRegNumber" hasFeedback {...formItemLayout}>
              {getFieldDecorator('taxRegNumber', {
                initialValue: entityDirectorInfo.taxRegNumber,
              })(<Input />)}
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem label="Source of Wealth" hasFeedback {...formItemLayout}>
              {getFieldDecorator('sourceOfWealth', {
                initialValue: entityDirectorInfo.sourceOfWealth,
              })(<Input />)}
            </FormItem>
          </Col>
        </Row>
        <Row gutter={0}>
          <Col span={8}>
            <FormItem label="Comments" hasFeedback {...formItemLayout}>
              {getFieldDecorator('comments', {
                initialValue: entityDirectorInfo.comments,
              })(<Input />)}
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem label="SSN" hasFeedback {...formItemLayout}>
              {getFieldDecorator('ssn', {
                initialValue: entityDirectorInfo.ssn,
              })(<Input />)}
            </FormItem>
          </Col>
        </Row>
      </div>
    </Form>

  )
}

EntityDirectorData.propTypes = {
  form: PropTypes.object.isRequired,
  dispatch: PropTypes.func,
  entityDirectorData: PropTypes.object,
  loading: PropTypes.object,
}

export default connect(({ entityDirectorData, loading }) => ({ entityDirectorData, loading }))(Form.create()(EntityDirectorData))

